<template>
  <!-- 跟单员页面 -->
  <div id="order-page" style=" animation: fadeIn 0.5s;">
    <!-- 订单标签页 -->
    <div class="order-tabs-container">
      <div class="flex border-b border-gray-200" style="display: flex;">
        <button
            style="border:none !important;"
            v-for="(tab, index) in tabs"
            :key="index"
            :class="activeTab === index ? 'tab-active' : 'tab-inactive'"
            @click="activeTab = index"
        >
          {{ tab.name }}
          <span v-if="activeTab === index" class="tab-indicator"></span>
        </button>
      </div>

<!--      &lt;!&ndash; 标签页内容区域 &ndash;&gt;
      <div class="tab-content">
        &lt;!&ndash; 这里可以根据activeTab显示不同内容 &ndash;&gt;
        <div v-if="activeTab === 0">全部订单内容区域</div>
        <div v-if="activeTab === 1">待服务内容区域</div>
        <div v-if="activeTab === 2">进行中内容区域</div>
      </div>-->
    </div>
    <!-- 待抢单列表 -->
    <div style="padding-left: 1rem; padding-right: 1rem; padding-top: 0.75rem; padding-bottom: 0.75rem;">
      <div style="display: flex; flex-direction: column; gap: 0.75rem;">
        <div style="background-color: white; border-radius: 1rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); padding: 1rem; transition: all 0.3s ease-in-out; animation: slideUp 0.5s;">
          <div style="display: flex; justify-content: space-between; align-items: flex-start;">
            <div>
              <h3 style="font-weight: 500;">现代简约风格全屋定制</h3>
              <p style="margin-top: 0.25rem; font-size: 0.875rem; color: #6b7280;">订单编号: OD20250615001</p>
            </div>
            <span style="background-color: #fef9c3; color: #a16207; font-size: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 9999px;">待抢单</span>
          </div>
          <div style="margin-top: 0.75rem; display: flex; align-items: center; font-size: 0.875rem; color: #4b5563;">
            <i class="fa-solid fa-map-marker-alt" style="color: #3b82f6; margin-right: 0.25rem;"></i>
            <span>北京市朝阳区建国路88号</span>
          </div>
          <div style="margin-top: 0.5rem; display: flex; align-items: center; font-size: 0.875rem; color: #4b5563;">
            <i class="fa-solid fa-calendar-alt" style="color: #3b82f6; margin-right: 0.25rem;"></i>
            <span>预约时间: 2025-06-16 10:00</span>
          </div>
          <div style="margin-top: 0.75rem; display: flex; justify-content: space-between; align-items: center;">
            <div>
              <span style="color: #3b82f6; font-weight: 700;">¥2,500</span>
              <span style="font-size: 0.875rem; color: #6b7280;">跟单佣金</span>
            </div>
            <button style="background-color: #3b82f6; color: white; font-size: 0.875rem;  border-radius: 0.5rem; font-weight: 500; transition: all 0.3s ease-in-out;margin-left: 10px;margin-right: 10px">立即抢单</button>
          </div>
        </div>
        <div style="background-color: white; border-radius: 1rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); padding: 1rem; transition: all 0.3s ease-in-out; animation: slideUp 0.5s; animation-delay: 0.1s;">
          <div style="display: flex; justify-content: space-between; align-items: flex-start;">
            <div>
              <h3 style="font-weight: 500;">小户型厨房改造</h3>
              <p style="margin-top: 0.25rem; font-size: 0.875rem; color: #6b7280;">订单编号: OD20250615002</p>
            </div>
            <span style="background-color: #fef9c3; color: #a16207; font-size: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 9999px;">待抢单</span>
          </div>
          <div style="margin-top: 0.75rem; display: flex; align-items: center; font-size: 0.875rem; color: #4b5563;">
            <i class="fa-solid fa-map-marker-alt" style="color: #3b82f6; margin-right: 0.25rem;"></i>
            <span>上海市浦东新区张江高科技园区</span>
          </div>
          <div style="margin-top: 0.5rem; display: flex; align-items: center; font-size: 0.875rem; color: #4b5563;">
            <i class="fa-solid fa-calendar-alt" style="color: #3b82f6; margin-right: 0.25rem;"></i>
            <span>预约时间: 2025-06-17 14:30</span>
          </div>
          <div style="margin-top: 0.75rem; display: flex; justify-content: space-between; align-items: center;">
            <div>
              <span style="color: #3b82f6; font-weight: 700;">¥1,200</span>
              <span style="font-size: 0.875rem; color: #6b7280;">跟单佣金</span>
            </div>
            <button style="background-color: #3b82f6; color: white; font-size: 0.875rem;  border-radius: 0.5rem; font-weight: 500; transition: all 0.3s ease-in-out;margin-left: 10px;margin-right: 10px">立即抢单</button>
          </div>
        </div>
        <div style="background-color: white; border-radius: 1rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); padding: 1rem; transition: all 0.3s ease-in-out; animation: slideUp 0.5s; animation-delay: 0.2s;">
          <div style="display: flex; justify-content: space-between; align-items: flex-start;">
            <div>
              <h3 style="font-weight: 500;">卫浴洁具更换</h3>
              <p style="margin-top: 0.25rem; font-size: 0.875rem; color: #6b7280;">订单编号: OD20250615003</p>
            </div>
            <span style="background-color: #fef9c3; color: #a16207; font-size: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 9999px;">待抢单</span>
          </div>
          <div style="margin-top: 0.75rem; display: flex; align-items: center; font-size: 0.875rem; color: #4b5563;">
            <i class="fa-solid fa-map-marker-alt" style="color: #3b82f6; margin-right: 0.25rem;"></i>
            <span>广州市天河区珠江新城</span>
          </div>
          <div style="margin-top: 0.5rem; display: flex; align-items: center; font-size: 0.875rem; color: #4b5563;">
            <i class="fa-solid fa-calendar-alt" style="color: #3b82f6; margin-right: 0.25rem;"></i>
            <span>预约时间: 2025-06-18 09:00</span>
          </div>
          <div style="margin-top: 0.75rem; display: flex; justify-content: space-between; align-items: center;">
            <div>
              <span style="color: #3b82f6; font-weight: 700;">¥800</span>
              <span style="font-size: 0.875rem; color: #6b7280;">跟单佣金</span>
            </div>
            <button style="background-color: #3b82f6; color: white; font-size: 0.875rem;  border-radius: 0.5rem; font-weight: 500; transition: all 0.3s ease-in-out;margin-left: 10px;margin-right: 10px">立即抢单</button>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script setup>
import { ref, onMounted, watch } from 'vue';

// 订单状态选项卡
const activeOrderTab = ref('all');

// 订单数据
const orders = ref([]);

// 返回上一页
const navigateBack = () => {
  uni.navigateBack();
};

// 获取订单状态文本
const getOrderStatusText = (status) => {
  const statusMap = {
    pendingInstallation: '待安装',
    installing: '安装中',
    completed: '已完成',
    cancelled: '已取消'
  };
  return statusMap[status] || '未知状态';
};

// 获取订单状态样式
const getOrderStatusClass = (status) => {
  const classMap = {
    pendingInstallation: 'bg-orange-100 text-orange-600',
    installing: 'bg-blue-100 text-blue-600',
    completed: 'bg-green-100 text-green-600',
    cancelled: 'bg-neutral-100 text-neutral-600'
  };
  return classMap[status] || 'bg-neutral-100 text-neutral-600';
};

// 获取订单操作文本
const getOrderActionText = (status) => {
  const actionMap = {
    pendingInstallation: '开始安装',
    installing: '完成安装',
    completed: '查看详情',
    cancelled: '查看详情'
  };
  return actionMap[status] || '查看详情';
};

// 联系客户
const contactCustomer = (orderId) => {
  uni.makePhoneCall({
    phoneNumber: '13800138000',
    fail: (err) => {
      uni.showToast({
        title: '拨打电话失败',
        icon: 'none'
      });
    }
  });
};
const tabs = [
  { name: '待抢单', icon: 'fa-list' },
  { name: '进行中', icon: 'fa-clock' },
  { name: '已完成', icon: 'fa-clock' },
];

const activeTab = ref(0);
// 处理订单操作
const handleOrderAction = (order) => {
  if (order.status === 'pendingInstallation') {
    // 开始安装
    uni.showModal({
      title: '开始安装',
      content: '确定开始安装此订单吗？',
      success: (res) => {
        if (res.confirm) {
          // 更新订单状态
          order.status = 'installing';
          uni.showToast({
            title: '已开始安装',
            icon: 'success'
          });
        }
      }
    });
  } else if (order.status === 'installing') {
    // 完成安装
    uni.navigateTo({
      url: '/pages/master/complete-installation?id=' + order.id
    });
  } else {
    // 查看详情
    uni.navigateTo({
      url: '/pages/master/order-detail?id=' + order.id
    });
  }
};

// 模拟获取订单数据
const fetchOrders = () => {
  if (activeOrderTab.value === 'all') {
    orders.value = [
      {
        id: 1,
        orderNo: 'ORD20230512001',
        time: '2023-05-12 14:30',
        location: '北京市朝阳区',
        productImage: 'https://picsum.photos/id/1060/200/200',
        productName: '现代简约防滑瓷砖 800x800mm',
        serviceType: '瓷砖安装',
        price: 300.00,
        status: 'pendingInstallation',
        customerAvatar: 'https://picsum.photos/id/64/100/100',
        customerName: '李先生'
      },
      {
        id: 2,
        orderNo: 'ORD20230511005',
        time: '2023-05-11 09:15',
        location: '上海市浦东新区',
        productImage: 'https://picsum.photos/id/1067/200/200',
        productName: '智能马桶一体机 全自动冲洗烘干',
        serviceType: '卫浴安装',
        price: 200.00,
        status: 'installing',
        customerAvatar: 'https://picsum.photos/id/65/100/100',
        customerName: '王女士'
      },
      {
        id: 3,
        orderNo: 'ORD20230510003',
        time: '2023-05-10 16:45',
        location: '广州市天河区',
        productImage: 'https://picsum.photos/id/1048/200/200',
        productName: '实木复合地板 12mm厚',
        serviceType: '地板安装',
        price: 500.00,
        status: 'completed',
        customerAvatar: 'https://picsum.photos/id/91/100/100',
        customerName: '张先生'
      }
    ];
  } else if (activeOrderTab.value === 'pendingInstallation') {
    orders.value = [
      {
        id: 1,
        orderNo: 'ORD20230512001',
        time: '2023-05-12 14:30',
        location: '北京市朝阳区',
        productImage: 'https://picsum.photos/id/1060/200/200',
        productName: '现代简约防滑瓷砖 800x800mm',
        serviceType: '瓷砖安装',
        price: 300.00,
        status: 'pendingInstallation',
        customerAvatar: 'https://picsum.photos/id/64/100/100',
        customerName: '李先生'
      }
    ];
  } else if (activeOrderTab.value === 'installing') {
    orders.value = [
      {
        id: 2,
        orderNo: 'ORD20230511005',
        time: '2023-05-11 09:15',
        location: '上海市浦东新区',
        productImage: 'https://picsum.photos/id/1067/200/200',
        productName: '智能马桶一体机 全自动冲洗烘干',
        serviceType: '卫浴安装',
        price: 200.00,
        status: 'installing',
        customerAvatar: 'https://picsum.photos/id/65/100/100',
        customerName: '王女士'
      }
    ];
  } else if (activeOrderTab.value === 'completed') {
    orders.value = [
      {
        id: 3,
        orderNo: 'ORD20230510003',
        time: '2023-05-10 16:45',
        location: '广州市天河区',
        productImage: 'https://picsum.photos/id/1048/200/200',
        productName: '实木复合地板 12mm厚',
        serviceType: '地板安装',
        price: 500.00,
        status: 'completed',
        customerAvatar: 'https://picsum.photos/id/91/100/100',
        customerName: '张先生'
      }
    ];
  } else {
    orders.value = [];
  }
};

onMounted(() => {
  // 初始化数据
  fetchOrders();

  // 监听选项卡变化，重新获取数据
  watch(activeOrderTab, () => {
    fetchOrders();
  });
});
</script>

<style scoped>
/* 选项卡样式 */
.tab-active {
  @apply inline-block py-3 px-4 text-white bg-primary rounded-t-lg font-medium transition-all duration-300 ease-in-out;
}
.tab-inactive {
  @apply inline-block py-3 px-4 text-neutral-500 hover:text-neutral-700 font-medium transition-colors duration-300 ease-in-out;
}

/* 订单卡片样式 */
.card-hover {
  @apply hover:shadow-lg transition-shadow duration-300 ease-in-out;
}

/* 按钮样式 */
.btn-primary {
  @apply bg-primary text-white px-4 py-2 rounded-lg font-medium transition-all duration-300 ease-in-out hover:bg-primary-dark active:scale-95;
}
.btn-secondary {
  @apply bg-neutral-100 text-neutral-700 px-4 py-2 rounded-lg font-medium transition-all duration-300 ease-in-out hover:bg-neutral-200 active:scale-95;
}
.order-tabs-container {
  width: 100%;
  margin-top: 1rem;
}

/* 标签样式 */
.flex button {
  flex: 1;
  padding: 0.5rem 0;
  font-weight: 500;
  position: relative;
  transition: all 0.3s ease;
  border: none;
}
button:after{
  border: none;
}
.tab-inactive {
  color: #737373;
  background-color: white;
}

.tab-active {
  color: #3b82f6;
  background-color: #ffffff;
}

/* 标签指示器 */
.tab-indicator {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #3b82f6;
  transition: all 0.3s ease;
}

/* 标签内容区域 */
.tab-content {
  padding: 1rem 0;
}

/* 标签切换动画 */
.tab-content > div {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
</style>